<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.0.js"></script>
		<style>
			img{
				display: block;
				width: 100px;
				position: relative;
			}
		</style>
		<script>
			$(function(){
				$("button").eq(0).click(function(){
					T = setInterval(fun);
				})
				$("button").eq(1).click(function(){
					clearInterval(T);
					$("img").stop(true,false);
				})
			});
			function fun(){
				$("img").animate({"left":"300px","width":"200px"},2000,function(){
					$("img").css({"transform":"rotateY(180deg)"})
				})
				.animate({"left":"0px","width":"100px"},2000,function(){
					$("img").css({"transform":"rotateY(0deg)"})
				})
			}
		</script>
	</head>
	<body>
		<button>开始动画</button>
		<button>停止动画</button>
		<img src="img/fish1.png" />
	</body>
</html>
